<template>
    <div class="home-wrap">
        <web-header selectnum=0></web-header>
        <div class="swiper-wrap">
            <el-carousel>
                <el-carousel-item v-if="bannerArr.length" v-for="(item,index) in bannerArr" :key="index">
                 <a :href="item.url?item.url:'#'" :style="'cursor:pointer;display: block;background-image: url(' + item.imageList[0].fileUrl + ');background-size: 100% 100%;background-repeat:no-repeat;background-position:top center;'"></a> 
                </el-carousel-item>
                <el-carousel-item v-if="!bannerArr.length">
                 <a class="banner" style="display:block;height:499px;width:100%;backgroundSize:100%;backgroundSize:cover;backgroundRepeat:no-repeat;" ></a> 
                </el-carousel-item>
            </el-carousel>
        </div>  
        <div class="total-num">
            <div class="total-list">
                <div class="list-num"><span class="num"><v-countup :duration="3" :start-value="start"  :end-value="end"></v-countup></span><span class="num-name">家</span> </div>
                <div class="list-name">入驻企业</div>
            </div>
            <div class="total-list">
                <div class="list-num"><span class="num"><v-countup :duration="3" :start-value="start"  :end-value="end1"></v-countup></span><span class="num-name">次</span> </div>
                <div class="list-name">融资服务</div>
            </div>
            <div class="total-list">
                <div class="list-num"><span class="num"><v-countup :duration="3" :start-value="start" :decimals="1" :end-value="end2"></v-countup></span><span class="num-name">亿</span></div>
                <div class="list-name">放贷金额</div>
            </div>
        </div>
        <div class="product-wrap" v-if="dataList.length">
            <div class="p-title">
                <div class="separator"></div>
                <div class="title2">热门贷款产品</div>
                <div @click="linkTo('/product')" class="link-more">更多<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="product-info">
                <div class="img-wrap">
                    <img @click="linkTo('/productDetail',dataList[0].id)" class="pic" :src="dataList[0].photoFiles.length?dataList[0].photoFiles[0].fileUrl:''" alt="">
                    <div class="pic-list">
                        <img @click="linkTo('/productDetail',dataList[0].id)" v-if="index != 0" v-for="(item,index) in dataList[0].photoFiles" :key="index" :src="item.fileUrl" alt="">
                    </div>
                </div>
                <div class="info-item">
                    <div class="title">产品名称</div>
                    <p class="over-hidden">{{dataList[0].productName}}</p>
                    <div class="title">产品介绍</div>
                    <p class="text" v-html="dataList[0].memo"></p>
                    <!-- 修改内容 -->
                    <!-- <div @click="linkTo('/productDetail',dataList[0].id)" class="btn">申请</div> -->
                    <!-- <div class="ask-btn"><span class="fa fa-hand-pointer-o">在线咨询</span></div> -->
                    <!-- <div class="ask-btn"><span>在线咨询</span></div> -->
                    <div class="apply-btn" @click="linkTo('/productDetail',dataList[0].id)"><span>立即申请</span></div>
                </div>
            </div>
        </div>
        <div class="product-item" v-if="dataList.length>1">
            <div class="product-title">
                <div v-if="index<=4&&index>0" class="product-list" @click="linkTo('/productDetail',item.id)" v-for="(item,index) in dataList" :key="index">
                    <img :src="item.photoFiles[0].fileUrl" alt="">
                    <div class="list-info">
                        <div class="title over-hidden">{{item.productName}}</div>
                        <div class="date">{{item.gmtCreated}}</div>
                        <div class="list-line over-hidden">
                            <div class="line-item"><span>贷款额度：</span>{{item.loanFundMin+' 万元'+' ~ '+item.loanFundMax+' 万元'}}</div>
                            <div class="line-item"><span>贷款最高期限：</span>{{item.investYearDesc}}</div>
                            <div class="line-item"><span>贷款年化利率：</span>{{item.minReportRate}}%/年</div>
                            <div class="line-item"><span>资金主体：</span>{{returnBody(item.fundBodyDatas)}}</div>
                        </div>
                        <div class="list-line">
                            <div class="line-item"><span>贷款适用地区：</span>{{returnArrName(item.areaDatas)}}</div>
                            <div class="line-item"><span>申请者最低成立年限：</span>{{item.applyMixYear + '年'}}</div>
                            <div class="line-item"><span>申请者盈利要求：</span>{{item.applyProfit == 'y'?'需盈利':'无要求'}}</div>
                            <div class="line-item"><span>申请者最低营业收入要求：</span>{{item.applyMixIncome}}</div>
                        </div>
                        <div class="btn">申请</div>
                    </div>
                </div>
            </div>
        </div>    
        <div class="service-wrap">
            <div class="separator"></div>
            <div class="title">服务案例</div>
            <div class="service-info">
                <div class="service-list">
                    <img src="../../images/list1.png" alt="">
                    <div class="list-info">
                        <div class="list-title"><span>上海顺途网络科技有限公司</span></div>
                        <!-- <div class="list-text">行业领域：<span>海外租车</span></div>
                        <div class="list-text">获贷金融：<span>200万</span></div>
                        <div class="list-text">放款银行：<span>江苏银行</span></div>
                        <div class="list-text">放款时间：<span>2018年03月30日</span></div> -->
                        <div class="list-text">B+轮，北极光投资、汉鼎亚太、德迅资本</div>
                        <div class="list-text">综合型海外租车服务平台</div>
                        <div class="list-text">千万级风险贷款</div>
                    </div>
                </div>
                <div class="service-list">
                    <img src="../../images/list2.png" alt="">
                    <div class="list-info">
                        <div class="list-title"><span>上海艾力彼信息科技有限责任公司</span></div>
                        <!-- <div class="list-text">行业领域：<span>医疗服务</span></div>
                        <div class="list-text">获贷金融：<span>200万</span></div>
                        <div class="list-text">放款银行：<span>江苏银行</span></div>
                        <div class="list-text">放款时间：<span>2018年03月30日</span></div> -->
                        <div class="list-text">A轮，晨兴资本、火山石投资</div>
                        <div class="list-text">肾病专科连锁医院和透析中心</div>
                        <div class="list-text">千万级风险贷款</div>
                    </div>
                </div>
                <div class="service-list">
                    <img src="../../images/list3.png" alt="">
                    <div class="list-info">
                        <div class="list-title"><span>上海复通智能科技有限公司</span></div>
                        <!-- <div class="list-text">行业领域：<span>智能硬件</span></div>
                        <div class="list-text">获贷金融：<span>200万</span></div>
                        <div class="list-text">放款银行：<span>江苏银行</span></div>
                        <div class="list-text">放款时间：<span>2018年03月30日</span></div> -->
                        <div class="list-text">A轮，维思资本</div>
                        <div class="list-text">向全国50万家汽修店提供智能硬件终端和金融服务的高科技企业</div>
                        <div class="list-text">千万级风险贷款</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="price-wrap">
            <div class="separator"></div>
            <div class="title">风险贷款</div>
            <div class="service-info">
                <video-player  class="video-player-box vjs-big-play-centered video-style"
                    ref="videoPlayer"
                    :options="playerOptions"
                    :playsinline="true"
                    customEventName="customstatechangedeventname">
                    Your browser does not support the video tag.
                </video-player>
                <!-- <video controls src="http://www.w3school.com.cn/i/movie.ogg"></video> -->
                <div class="price-info">
                    <div class="info-title">什么是风险贷款？</div>
                    <p>风险贷款，也称为风险借贷，作为风险投资的最佳搭配，为快速成长的企业及其投资者带来了巨大的价值。 </p>
                    <p>在成长的过程中，创业公司通过不断的迈入新的里程碑提升企业价值。</p>
                    <p>在这个过程中，企业需要通过在多个时间节店注入风险投资来保持企业的扩张。</p>
                    <p>因此，最佳的融资时间是在每一个价值驱动点之后。</p>
                    <p>通过风险投资搭配风险贷款，获得同样的资金的同时降低对于股份的稀释。</p>
                </div>
            </div>
        </div>
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <div class="product-line">您将申请产品{{productName}},请确认</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="success" @click="confrimBtn">确 定</el-button>
            </span>
        </el-dialog>
        <web-footer></web-footer>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
export default {
    data() {
        return {
            dataList:[],
            centerDialogVisible:false,
            productName:'',
            id:'',
            bannerArr:[],
            playerOptions: {
                // videojs options
                muted: false,
                language: 'en',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                width: 422,
                h: 256,
                sources: [{
                    type: "video/mp4",
                    src: "http://1252042124.vod2.myqcloud.com/8bddf4bevodtransgzp1252042124/15add9cc7447398156072831075/v.f20.mp4"
                }],
            },
            start: 1,
            end: 5057,
            end1: 320,
            end2: 16.1

        }
    },
    components: {
        'web-header':() => import('../common/web-header'),
        'web-footer':() => import('../common/web-footer'),
        'v-countup':() => import('vue-countupjs')
    },  
    mounted(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.getBannerList()
        this.getProductPage()
    },
    methods:{
        returnPrice(num){
            return common.returnNum(num)
        },
        linkTo(link,id){
            this.$router.push({path: link, query: {id: id}})
        },
        returnArrName(arr){
            let arr1 = []
            arr.map( (item, index) => {
                let itemArea = "";
                if (item.financingProvinceName) {
                    itemArea = item.financingProvinceName
                }
                if (item.financingCityName) {
                    itemArea = item.financingProvinceName+item.financingCityName
                }
                if (item.financingDistrictName) {
                    itemArea = item.financingProvinceName+item.financingCityName+item.financingDistrictName
                }
               arr1.push(itemArea)
            })
            return arr1.join(';')
        },
        returnBody(data){
            let arr = []
            data.map((item)=>{
                arr.push(item.fundBodyDesc)
            })
            return  arr.length?arr.join(','):'--'
        },
        applyBtn(id,name){
            this.centerDialogVisible = true;
            this.productName = name;
            this.id = id;
        },
        confrimBtn(){
                let  url = CONSTANT.URL.SYSTEM.APPLYPRODUCT,
                data = {productId:this.id},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    this.centerDialogVisible = false;
                    if(res.status == 200){
                        this.$message({
                            message: '申请成功！',
                            type: 'success'
                        });
                    }else{
                        this.$message.error(res.msg);
                    }
                })
        },
        getProductPage(){
            let  url = CONSTANT.URL.WEB.FINDPRODUCTBYPAGE,
                data = {},
                dataForm = {
                    pageIndex:1,
                    pageSize:5
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.dataList = res.data.bussData;
                    }else{
                    }
                })
        },
        getBannerList(){
            let url = CONSTANT.URL.WEB.FINDBANNERBYPAGE;
            let dataForm = {},
                data={
                    pageIndex:1,
                    pageSize:10
                }
            common.requestAjax(url,data,dataForm,(res)=>{
                if(res.status == 200){
                     let data = res.data;
                     this.bannerArr = res.data.bussData;
                }
            })
        }
    }
}
</script>

<style lang="scss">
    @keyframes click {
        0% {
            top: 9px;
        }
        50% {
            top: 14px;
        }
        100% {
            top: 9px;
        }
    }
    .home-wrap{
        overflow: hidden;
        .swiper-wrap{
            height: 499px;
            .banner{
                background-image:url(../../images/banner.png);
                background-repeat:no-repeat;
            }
            .el-carousel {
                height: 100%;
                .el-carousel__container {
                    height: 100%;
                }
            }
            .el-carousel__arrow{
                font-size: 22px;
                width: 60px;
                height: 60px;
                background-color: rgba(31,45,61,.15);
                &:hover{
                    background-color: rgba(31,45,61,.3);
                }
            }
            .el-carousel__indicator{
                width: 14px;
                height: 14px;
                border-radius: 50%;
                &.is-active{
                    .el-carousel__button{
                        background-color: #ED7018;
                        border: none;
                        border: 1px solid #ED7018;
                    }
                }
                .el-carousel__button{
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    border: 1px solid rgba(153,153,153,0.4);
                    box-sizing: border-box;
                    background-color: #fff;
                    opacity: 1;
                }
            }
            .el-carousel__indicators{
                bottom: 50px;
            }
            .el-carousel__item {
                a {
                    height: 100%;
                }
            }
            .el-carousel__item h3 {
                color: #475669;
                font-size: 18px;
                opacity: 0.75;
                line-height: 300px;
                margin: 0;
            }
            
            .el-carousel__item:nth-child(2n) {
                background-color: #99a9bf;
            }
            
            .el-carousel__item:nth-child(2n+1) {
                background-color: #d3dce6;
            }
            @media screen and (max-width: 1440px) {
                height: 400px;
            }
            @media screen and (min-width: 1441px) and (max-width: 1600px) {
                height: 499px;
            }
        }
        .total-num{
            position: relative;
            width: 1200px;
            height:157px;
            background-color: #fff;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            margin: -43px auto 0;
            z-index: 100;
            box-shadow: 5px 18px 35px  rgba(0, 0, 0, .06); 
            overflow: hidden;
            padding-top: 67px;
            .total-list{
                float: left;
                font-size: 20px;
                color: #666;
                width: 33.33%;
                height: 110px;
                text-align: center;
                border-right: 1px solid #D1D1D1;
                box-sizing: border-box;
                &:last-child{
                    border: none;
                }
                .list-num{
                    margin-bottom: 12px;
                    padding-top: 10px;
                    span.num{
                        font-size: 50px;
                        color: #ED7018;
                    }
                    span.num-name{
                        position: relative;
                        top: -10px;
                        margin-left: 12px;
                        display: inline-block;
                        height: 40px;
                        line-height: 40px;
                    }
                }
                .list-name{
                    font-size: 16px;
                    color: #333;
                }
            }
            @media screen and (max-width: 1440px) {
                height: 100px;
                padding-top: 20px;
                padding-bottom: 25px;
            }
            @media screen and (min-width: 1441px) and (max-width: 1600px) {
                height: 120px;
            }
        }
        .product-wrap{
            margin-top: 80px;
            width: 1200px;
            margin: 0 auto;
            .p-title{
                overflow: hidden;
                padding: 57px 0 47px;
                .separator {
                    width: 4px;
                    height: 24px;
                    float: left;
                    background: linear-gradient(#ED7018, #F7AB00);
                    border-top: 0px 0px 0px 4px;
                    margin-top: 4px;
                    margin-right: 10px;
                }
            }
            .title2{
                float: left;
                text-align: left;
                font-weight: bold;
                margin-bottom: 8px;
                font-size: 24px;
            }
            .link-more{
                float: right;
                position: relative;
                top: 10px;
                font-weight: normal;
                color: #666666;
                font-size: 16px;
                cursor: pointer;
                &:hover{
                    color: #ED7018;
                }
            }
            
            p{
                text-align: center;
                font-size: 20px;
                color: #111;
                padding-bottom: 20px;
            }
            /*
            .p-title{
                font-weight: bold;
                text-align: left;
                width: 1200px;
                margin: 0 auto;
                margin-bottom: 27px;
            }
            */
            .product-info{
                position: relative;
                width:1160px;;
                height: 410px;
                background-color: #fff;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                margin: 0 auto 60px;
                z-index: 100;
                box-shadow:5px 5px 15px 5px  rgba(0, 0, 0, .06); 
                overflow: hidden;
                padding: 20px;
                .img-wrap{
                    float: left;
                    width:560px;
                    margin-right: 30px;
                    .pic{
                        width: 100%;
                        height: 276px;
                    }
                    img{
                        -webkit-transition: opacity .35s,-webkit-transform .35s;
                            transition: opacity .35s,transform .35s;
                            cursor: pointer;
                            &:hover{
                                -webkit-transform: scale(1.04);
                                transform: scale(1.04);
                                filter: alpha(opacity=100);
                                -moz-opacity: 1;
                                -webkit-opacity: 1;
                                -ms-opacity: 1;
                                opacity: 1;  
                            }
                    }
                    .pic-list{
                        margin-top: 14px;
                        img{
                            width: 32.3%;
                            height: 120px;
                            margin-right: 1.5%;
                            &:last-child{
                                margin-right: 0;
                            }
                        }
                    }
                }
                .info-item{
                    float: left;
                    font-size: 14px;
                    color: #111;
                    width: 49%;
                    .title{
                        width: 96px;
                        height: 30px;
                        font-size: 16px;
                        color: #fff;
                        background-color: #ED7018;
                        border-radius: 15px;
                        -webkit-border-radius: 15px;
                        text-align: center;
                        line-height: 30px;
                        /* margin-top: 58px; */
                    }

                    .text{
                        p{
                            margin-top: 0;
                        }
                    }

                    p{
                        text-align: left;
                        font-size: 14px;
                        padding-bottom: 0;
                        margin-bottom: 22px;
                        margin-top: 20px;
                        img,video{
                            display: none;
                        }
                        &.text{
                            overflow: auto;
                            height:150px;
                            line-height: 1.5;
                            &::-webkit-scrollbar {  
                                width: 14px;  
                                height: 14px;  
                            }  
                                
                            &::-webkit-scrollbar-track,  
                            &::-webkit-scrollbar-thumb {  
                                border-radius: 999px;  
                                border: 5px solid transparent;  
                            }  
                                
                            &::-webkit-scrollbar-track {  
                                box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  
                            }  
                                
                            &::-webkit-scrollbar-thumb {  
                                min-height: 20px;  
                                background-clip: content-box;  
                                box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  
                            }  
                                
                            &::-webkit-scrollbar-corner {  
                                background: transparent;  
                            }  
                        }
                    }
                    .btn{
                        position: absolute;
                        bottom: 20px;
                        right: 63px;
                        width: 510px;
                        height: 60px;
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        background-color: #ED7018;
                        font-size: 24px;
                        color: #fff;
                        text-align: center;
                        line-height: 60px;
                        cursor: pointer;
                        margin: 45px auto 0;
                        &:hover{
                            background-color: #ED9000;
                            transition:all .2s linear
                        }
                    }
                    .apply-btn {
                        width: 320px;
                        height: 60px;
                        float: left;
                        border-radius: 30px;
                        background-color: #ED7018;
                        text-align: center;
                        color: white;
                        font-size: 20px;
                        cursor: pointer;
                        line-height: 60px;
                        margin-left: 120px;
                        margin-top: 20px;
                        &:hover {
                            background-color: #ED9000;
                            transition:all .2s linear;
                            cursor: pointer; 
                            span {
                                &:before {
                                    content: url(../../../static/apply_finger.png);
                                    animation: click .5s infinite;
                                    position: relative;
                                    right: 10px;
                                    top: 9px;
                                }
                            }
                        }
                        span {
                            &:before {
                                content: url(../../../static/apply_finger.png);
                                position: relative;
                                right: 10px;
                                top: 9px;
                            }
                        }
                    }
                    .ask-btn {
                        width: 200px;
                        height: 60px;
                        float: right;
                        border-radius: 30px;
                        border-color: #A7A7A7;
                        border-style: solid;
                        background-color: #FFFFFF;
                        text-align: center;
                        color: #333333;
                        font-size: 20px;
                        line-height: 60px;
                        span {
                            &:before {
                                content: url(../../../static/kf_head.png);
                                position: relative;
                                right: 10px;
                                top: 9px;
                            }
                        }
                        /*
                        .ask-head-icon {
                            &:before {
                            }
                        }
                        */
                    }
                }
            }
        }
        .product-item{
            box-sizing: border-box;
            width: 1200px;
            margin: 0 auto;
            .product-title{
                font-size: 20px;
                color: #111;
                /* font-weight: bold; */
                margin-bottom: 60px;
            }
            .product-list{
                    cursor: pointer;
                    box-sizing: border-box;
                    width: 1200px;
                    box-shadow:5px 5px 15px 5px  rgba(0, 0, 0, .06);
                    border-radius: 4;
                    padding: 20px;
                    overflow: hidden;
                    padding-top: 30px;
                    padding-bottom: 30px;
                    &:first-child{
                        border-top: 0px solid #000;
                    }
                    &:hover img{
                            -webkit-transform: scale(1.04);
                            transform: scale(1.04);
                            filter: alpha(opacity=100);
                            -moz-opacity: 1;
                            -webkit-opacity: 1;
                            -ms-opacity: 1;
                            opacity: 1;  
                        }
                    img{
                        float: left;
                        width: 24.167%;
                        height:194px;
                        margin-right: 2.67%;
                        -webkit-transition: opacity .35s,-webkit-transform .35s;
                        transition: opacity .35s,transform .35s;
                        cursor: pointer;
                    }
                    .btn{
                        position: absolute;
                        right: 0px;
                        top: 90px;
                        width: 100px;
                        height: 40px;
                        background-color: #ED7018;
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        font-size: 18px;
                        color: #fff;
                        text-align: center;
                        line-height: 40px;
                        cursor: pointer;
                        &:hover{
                            background-color: #ED9000;
                            transition: all .2s linear
                        } 
                    }
                    .list-info{
                        position: relative;
                        float: left;
                        overflow: hidden;
                        width: 68%;
                        .date{
                            position: absolute;
                            right: 0;
                            top: 9px;
                            font-size: 14px;
                            color: #999;
                        }
                        .title{
                            font-size: 18px;
                            color: #111;
                            font-weight: bold;
                            
                        }
                        .list-line{
                            float: left;
                            width:49%;
                            font-size: 16px;
                            color: #111;
                            .line-item{
                                margin-top: 21px;
                            }
                            span{
                                color: #666;
                            }
                            &:last-child{
                                width: 39%;
                            }
                        }
                    }
                } 
        }
        .service-wrap{
            position: relative;
            width: 1200px;
            margin: 0 auto;
            .separator {
                width: 4px;
                height: 24px;
                float: left;
                background: linear-gradient(#ED7018, #F7AB00);
                border-top: 0px 0px 0px 4px;
                margin-top: 4px;
                margin-right: 10px;
            }
            .title{
                text-align: left;
                font-weight: bold;
                font-size: 24px;
                color: #111;
                margin-bottom: 38px;
            }
            .service-info{
                display: flex;
                .service-list{
                    width: 380px;
                    height: 446px;
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    border: 1px solid #f2f2f2;
                    margin-right: 30px;
                    box-sizing: border-box;
                    padding-right: 15px;
                    transition: all .5s;
                    &:last-child{
                        margin-right: 0;
                    }
                    &:hover {
                        transform: translateY(-10px);
                        box-shadow: 5px 5px 15px 0px  rgba(0, 0, 0, .06);
                    }
                    img{
                        height: 150px;
                        padding: 47px 20px 30px;
                        border-top-left-radius: 10px;
                        -webkit-border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        -webkit-border-top-right-radius: 10px;
                        /* border-bottom: 1px solid #F2F2F2; */
                    }
                    .list-info{
                        font-size: 16px;
                        color: #666;
                        .list-title{
                            font-size: 18px;
                            color: #ED7018;
                            font-weight: bold;
                            color: #111;
                            padding: 20px 0 0 20px;
                            margin-top: -15px;
                            margin-bottom: 31px;
                            span {
                                padding-bottom:11px;
                                border-width: 0px 0px 3px 0px;
                                border-bottom-style: solid;
                                border-image: linear-gradient(#FFBB00, #E57324) 30 30;
                            }
                        }
                        .list-text{
                            font-size: 16px;
                            color: #666;
                            padding-left: 20px;
                            margin-top: 15px;
                            span{
                                color: #111;
                            }
                        }
                    }
                    &:last-child{
                        margin-right: 0;
                    }
                 }
            }
        }
        .price-wrap{
            width:  1200px;
            margin: 60px auto 0;
            overflow: hidden;
            padding-bottom: 62px;
            .separator {
                width: 4px;
                height: 24px;
                float: left;
                background: linear-gradient(#ED7018, #F7AB00);
                border-top: 0px 0px 0px 4px;
                margin-top: 4px;
                margin-right: 10px;
            }
            .title{
                text-align: left;
                font-weight: bold;
                font-size: 24px;
                color: #111;
                margin-bottom: 38px;
            }
            .video-player{
                /*margin-left: 59px;*/
                width: 422px;
                float: left;
                height: 265px;
                .video-js{
                    height: 265px;
                    background-color: #fff;
                }
            }
            video{
                float: left;
                /*
                width: 422px;
                height: 265px;
                */
            }
            .price-info{
                float: left;
                width: 49%;
                margin-left: 73px;
                p{
                    font-size: 14px;
                    color: #333;
                    margin-top: 10px;
                    line-height: 25px;
                    margin-bottom: 0;
                }
                .info-title{
                    font-weight: bold;
                    font-size: 20px;
                    padding-top: 14px;
                    margin-bottom: 15px;
                    color: #ED7018;
                }
            }
        }
        
    }
</style>
